<!--
 * @description: 1，点击选择上传
 点击选择是最常见的上传交互，之前原生上传控件，样式修改比较麻烦，为了修改上传样式，我们可以把该控件设置隐藏，
 用其他元素通过从click交互, 来触发该文件选择控件。在选择文件控件上绑定onchange事件，该控件在change后获取到文件，然后调用上传方法，实现如下：
 * @Date: 2023-06-26 15:06:43
 * @example: 
 * @params: 
-->


<template>
<div class="uploader-content" @click="handleClick">
    <input ref="inputRef" 
         class="uploader-target" 
         :name="name" :multiple="multiple" 
         :accept="accept" type="file"
         @change="handleChange" />
</div>
</template>
<script setup>
   const inputRef = shallowRef(null)
   const handleClick = () => {
       inputRef.value.value = ''
       inputRef.value?.click()
   }
   const handleChange = (e) => {
       const files = e.target.files
       if (!files) return
       // 获取到文件后调用附件上传方法
       uploadFiles(files)
   }
</script>
<style  lang='less' scoped>
   .uploader-target {
       display: none;
   }
</style>
